<template>
  <div >
    <mt-header title="我的项目" ref="appHeader"></mt-header>
    <!-- 中间组件部分 -->
    <!-- mode="out-in",设置当前元素先过渡，完成后新元素在进入 -->
    <transition name="rv" mode="out-in">
      <router-view class="middle-tmpl" :apprefs="$refs"></router-view>
    </transition>
    
    <!-- fixed="true"效果稍差 -->
    <mt-tabbar v-model="selected" fixed ref="appFooter">
      <mt-tab-item id="home">
        <img @click="changeHash" slot="icon" src="./assets/img/index/index2.png">
        首页
      </mt-tab-item>
      <mt-tab-item id="member">
        <img @click="changeHash" slot="icon" src="./assets/img/index/vip.png">
        会员
      </mt-tab-item>
      <mt-tab-item id="shopcart">
        <img @click="changeHash" slot="icon" src="./assets/img/index/shopcart.png">
        购物车<mt-badge type="error" size="small">{{shopcartNum}}</mt-badge>
      </mt-tab-item>
      <mt-tab-item id="search">
        <img @click="changeHash" slot="icon" src="./assets/img/index/find2.png">
        查找
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
import EventBus from './EventBus.js'
import GoodsTools from './GoodsTools.js'

export default{
    data () {
        return {
          selected: '',
          //num:0, // 购物车商品数
          // 屏幕宽
          screenWidth: document.body.clientWidth,// 屏幕高   
          screeHeight: document.body.clientHeight,
        }
    },
    created() {
        // 初始化小球数量
        //this.num = GoodsTools.getTotalCount();

        EventBus.$on('addShopcart',data => {
            //this.num += parseInt(data);
            // 改变store中的数据
            this.$store.dispatch('addNumByGoodsDetail',{ num:parseInt(data) })
        })
    },
    methods: {
        changeHash() {
            // 解决 调用早于 子组件赋值给父组件的selected
            this.$nextTick(function() {
                //在vue完成渲染任务后的行为
                this.$router.push({
                    name: this.selected
                })
            })
        }
    },
    watch: {
        selected (newV, oldV) {
          this.$router.push({
            name: newV
          })
        }
    },
    // 在购物车页面改变数据时，监视购物车数量
    computed: {
        shopcartNum() {
            return this.$store.getters.getNum
        }
    }
}
</script>
<style scoped>
    /*底部选项栏*/
    /*.mint-tabbar {
      position: fixed;
      bottom: 0;
    }*/
    .rv-enter-active,
    .rv-leave-active {
      transition: opacity .5s;
    }
    .rv-enter,
    .rv-leave-to {
      opacity: 0;
    }
</style>
